<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>团队订单</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/H5/css/sm.min.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/H5/css/balance.css?v=1" />
    <style>
        .wa_span{margin-top: .3rem;font-size: .8rem;color:blue;display: inline-block;text-indent: 0;letter-spacing: 0;}
        .wa_common{width: 96%;margin:.2rem auto;
            background-color: #f9f9f9;border-radius: .3rem;padding: .2rem .4rem;border:1px dotted #999999;
        font-size: small}
        .wa_common>div{padding: .2rem 0;}
        /*.wa_common>div:first-child{text-align: center}*/
        /*.wa_common>div:nth-child(2),.wa_common>div:nth-child(3){display: inline-block;width: 50%;}*/
    </style>
</head>
<body>
<div class="page-group ms-controller" :controller="wallet">
    <div class="page page-current">
        <header class="bar bar-nav">
            <a class="icon icon-left pull-left" href="javascript:window.history.go(-1);"></a>
            <a class="icon icon-home pull-right" href="/H5"></a>
            <h1 class="title">团队订单</h1>
        </header>

        <div class="content infinite-scroll infinite-scroll-bottom" style="top: 2rem;" data-distance="100"> <!--visibility-->

            <div style="display: flex;justify-content: space-around;padding: .3rem 1rem;margin-top: .6rem;text-align: center;">
                <div>总订单数</br><span class="wa_span">{{@total_num}}</span></div>
                <div>历史总金额</br><span class="wa_span">{{@total_money}}元</span></div>
            </div>
            <div style="display: flex;justify-content: space-around;padding: .3rem 1rem;margin-top: .6rem;text-align: center;">
                <div>当月订单数</br><span class="wa_span">{{@month_total_num}}</span></div>
                <div>当月总金额</br><span class="wa_span">{{@month_total_money}}元</span></div>

            </div>
            <div style="display: flex;justify-content: space-around;padding: .3rem 1rem;margin-top: .6rem;text-align: center;">

                <div style="text-indent: .3rem;letter-spacing: .3rem;">当日订单数</br><span class="wa_span">{{@day_total_num}}</span></div>
                <div>当日总金额</br><span class="wa_span">{{@day_total_money}}元</span></div>
            </div>

            <div>
                <div style="text-align: center;padding: .6rem 0;background-color: cornflowerblue;color: #fff">订单列表</div>
                <div class="buttons-tab" style="z-index: 100">
                    <a :on-click="@jump(3,true)" class="tab-link button type3">所有</a>
                    <a :on-click="@jump(1,true)" class="tab-link button type1">一级</a>
                    <a :on-click="@jump(2,true)" class="tab-link button type2">二级</a>
                </div>
                <div :for="el in @list">
                    <div class="wa_common">
                        <div>关联会员：{{el.nickname}}</div>
                        <div>时间：{{el.create_time}}</div>
                        <div>金额：{{el.performance||0.00}}</div>
                    </div>
                </div>
               <!-- <div class="wa_common">
                    <div>关联会员：熊大</div>
                    <div>时间：2019-01-01</div><div>金额：32312</div>
                </div>
                <div class="wa_common">
                    <div>关联会员：黄瓜</div>
                    <div>时间：2019-01-01</div><div>金额：32312</div>
                </div>-->
            </div>
            <!--<div class="integral_balance_first" :for="el in @list">
                <div>
                    <span><b style="font-size: .8rem">{{el.type_label}}</b></span>
                    <span style="float: right" :css="{'color': (el.change_money-0)>0?'#0c0':'red'}" >{{el.money}}</span>
                </div>
                <div>
                    <span style="color: rgb(153, 153, 153);">{{el.create_time}}</span>
                    <span style="float: right" :css="{'color': (el.settle_status-0)>0?'#0c0':'red'}" >{{el.settle_status_label}}</span>
                </div>
            </div>-->


        </div>
    </div>
</div>
<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
<script type='text/javascript' src='/H5/js/mall.js?v=10' charset='utf-8'></script>
<script>
    var balance = avalon.define({
        $id: "wallet",
        data: {total:{},income:{},expense:{}},
        list: [],
        total_money: 0.00,
        total_num: 0,
        month_total_money: 0.00,
        month_total_num: 0,
        day_total_money: 0.00,
        day_total_num: 0,
        page_num: 1,
        page_size: 10,
        loading: false,
        more: false,
        type: Mall.parseUrl( window.location.href ).type,
        getList: function( o ){
            var postData = {
                page_num: balance.page_num,
                page_size: balance.page_size,
                type: Mall.parseUrl( window.location.href ).type
            }
            if( balance.loading ){
                return
            }
            balance.loading = true;
            Mall.request( "/api/OrderListNew", postData )
                .always( function( data ){
                    if( data.error_code == 0 ){
                        balance.list = data.data.list;
                        balance.total_money = data.data.total_money;
                        balance.total_num = data.data.total_num;
                        balance.month_total_money = data.data.month_total_money;
                        balance.month_total_num = data.data.month_total_num;
                        balance.day_total_money = data.data.day_total_money;
                        balance.day_total_num = data.data.day_total_num;
                        $( ".content" ).removeClass( "visibility" );
                    }
                    balance.loading = false;
                } )
        },
        jump: function( e, o ){
            if( e ){
                if( !$( "a.type"+e ).hasClass( "active" ) ){
                    $( ".tab-link" ).removeClass( "active" );
                    $( "a.type"+e ).addClass( "active" );
                    if( o ){
                        window.history.replaceState(null, null, window.location.href.split("=")[0]+"="+e);
                    }
                }
                balance.type = e
            }
            balance.getList();
        }
    });
    balance.jump( balance.type );

    balance.getList();
    avalon.scan( document.body )
</script>
</body>
</html>